<template>
	<view class="container">
		<uni-card title="地铁信息" style="margin-top: 5px;">
			<view class="" style="display: flex;justify-content: space-between;align-items: center;">
				<view class="">{{item.first}}</view>
				<image src="/static/xianlu.png" style="width: 150px;height: 15px;" mode="scaleToFill"></image>
				<view class="">{{item.end}}</view>
			</view>
		</uni-card>
		<view class="" style="margin-top: 20px;"></view>
		<view class="" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
			<view class="" style="width: 47%;">
				<uni-card style="text-align: center;height: 100px;display: flex;justify-content: center;">
					<view class="" style="color: #007AFF;">
						<view class="item">剩余时间</view>
						<view class="item" style="font-size: 20px;">{{item.remainingTime}}分钟</view>
					</view>
				</uni-card>
			</view>
			<view class="" style="width: 47%;">

				<uni-card style="text-align: center;height: 100px;display: flex;justify-content: center;">
					<view class="" style="color: #4CD964;">
						<view class="item">剩余距离</view>
						<view class="item" style="font-size: 20px;">{{item.km}}km</view>
					</view>
				</uni-card>
			</view>
		</view>
		<uni-card title="地铁线路" style="margin-top: 20px;">
			<scroll-view scroll-x="true">
				<view style="display: flex;flex-wrap: nowrap;">
					<view v-for="(item1,index) in item.metroStepList" :key="index">
						<view class="" style="display: flex;align-items: center;">
							<view class="" style="height: 40px;width: 40px;border-radius: 40px;"
								:style="item1.name===item.runStationsName?'background-color: #007aff;':'background-color: #ccc;'">
							</view>
							<view class="line" v-if="index!=item.metroStepList.length-1"
								style="width: 40px;background-color: #ccc;"></view>
						</view>
						<view class="" style="margin-left: calc(40px / 2 - 1em /2);width: 1em;">
							{{item1.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				list: []
			};
		},
		onLoad(item) {
			this.get('/prod-api/api/metro/line/' + item.id, {

			}, 1).then(res => {
				let data = res.data
				this.item = data
				uni.setNavigationBarTitle({
					title: data.name
				})
			})
			/* this.get('/prod-api/api/metro/line', {
				lineIds: item.id
			}, ).then(res => {
				let data = res.data
				this.list = data
			}) */
		},
		onReady() {

		},
		onShow() {

		},
		methods: {

		}
	};
</script>

<style lang="scss">

</style>
